<template>
	<view>
		<u-navbar title="直播复盘" bgColor="transparent" :titleStyle="{'color':'#fff'}" leftIconColor="#fff" placeholder autoBack>
		</u-navbar>
		<scroll-view scroll-y="true" style="height: 88vh;" @scrolltolower="ReachBottom">
			<view class="listBox" v-if="livelist.length>0">
				<view class="pd40 item " v-for="(i,idx) in livelist">
					<view class="df">
						<view class="fw6 bold">
							{{i.name}}
						</view>
						<view>
							直播平台：<text class="bold">{{i.platform}}</text>
						</view>
					</view>
					<view class="mt20">
						直播方案：{{i.url}}
					</view>
					<view class="mt20">
						直播地址：{{i.url}}
					</view>
					<view class="mt10">
						{{i.start_time}}至{{i.end_time}}
					</view>
					<view class="boxData df mt15">
						<view class="box">
							{{i.audience}}
							<view class="">
								观众总数
							</view>
						</view>
						<view class="box">
							{{i.comment}}
							<view class="">
								弹幕条数
							</view>
						</view>
						<view class="box">
							{{i.reply}}
							<view class="">
								AI回复数
							</view>
						</view>
					</view>
					<view class="boxData df mt15">
						<view class="box">
							{{i.like}}
							<view class="">
								点赞总数
							</view>
						</view>
						<view class="box">
							{{i.focus}}
							<view class="">
								关注条数
							</view>
						</view>
						<view class="box">
							{{i.gift}}
							<view class="">
								送礼总数
							</view>
						</view>
					</view>
					<view class="dfx btns">
						<u-button size="mini" type="primary" text="弹幕列表"
							@click="$tools.navTo(`my/msgList?id=${i.id}&name=${i.name}`)"></u-button>
						<u-button size="mini" type="error" text="删除" @click="delItem(i)"></u-button>
					</view>
				</view>
			</view>
			<!-- 内容为空 -->
			<u-empty iconColor="#fff" textColor="#fff" marginTop="60" text="暂无直播记录" v-else mode="favor"></u-empty>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				livelist: [],
				bgAudio: null,
				formInline: {
					page: 1,
					limit: 10,
					total: 0
				},
				formData: {
					name: ''
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入话术库分组名称',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onShow() {
			this.getData()
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.getData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			console.log('onReachBottom', this.formInline.total, this.livelist.length);
			if (this.formInline.total > this.livelist.length) {
				this.formInline.page++
				this.getData();
			}
		},
		methods: {
			ReachBottom() {
				console.log('onReachBottom', this.formInline.total, this.livelist.length);
				if (this.formInline.total > this.livelist.length) {
					this.formInline.page++
					this.getData();
				}
			},
			getData() {
				let params = {
					...this.formInline
				}
				this.$api.liveDataList(params).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						if (this.formInline.page == 1) {
							this.livelist = res.data.list
						} else {
							this.livelist = this.livelist.concat(res.data.list)
						}
						this.formInline.total = res.data.count

						this.$forceUpdate()
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			delItem(i) {
				uni.showModal({
					title: '提示',
					content: '确认删除吗？删除后将无法找回',
					success: (r) => {
						if (r.confirm) {
							let params = {
								id: i.id
							}
							this.$api.delLiveData(params).then(res => {
								if (res.code == 200) {
									this.formInline = {
										page: 1,
										limit: 10,
										total: 0
									}
									this.getData()
								}
								this.$tools.toast(res.msg);
							})
						} else if (r.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	/deep/.u-navbar__content__title {
		color: #fff;
	}

	.listBox {
		margin: 30rpx;
		font-size: 15px;

		.item {
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			justify-content: space-between;
			align-items: center;

			.boxData {
				.box {
					text-align: center;
					background: #edf4ff;
					padding: 16rpx 45rpx;
					border-radius: 24rpx;
				}
			}

			.btns {
				margin-top: 20rpx;
				justify-content: end;
				width: 40%;
				margin-left: 60%;

				button {
					width: 45%;
				}
			}

			.info {
				line-height: 60rpx;
				font-weight: 600;
				width: 70%;

				.num {
					font-weight: 500;
				}
			}

			.edit {
				transform: rotate(90deg);
			}
		}

		// .item:last-child {
		// 	margin-bottom: 0;
		// }
	}
</style>